<template>
  <div class="header">
    <div class="tabbar_left">
      <!-- 顶部左侧静态 -->
      <el-icon style="margin-right: 10px;" @click="changeIcon">
        <component :is="fold? 'Fold':'Expand'"></component>
      </el-icon>
      <!-- 面包屑 -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <!-- 面包屑图标 -->
        <el-breadcrumb-item v-for="(item,index) in uesrouteData.matched" :key="index" v-show="item.meta.title">
          <!-- 图标 -->
         <!-- <el-icon>
          <component :is="item.meta.icon"></component>
         </el-icon> -->
          <!-- 标题 -->
          <span>{{ item.meta.title }} </span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="tabbar_right" style="display: none;">
      <el-button type="primary" :icon="FullScreen" @click="fullScreen"></el-button>
      <el-dropdown>
        <span class="el-dropdown-link">
          admin
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Action 1</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup lang="ts">
import { FullScreen, ArrowRight } from "@element-plus/icons-vue";
import { ref } from 'vue'
import { useRoute } from "vue-router";

const uesrouteData = useRoute()
console.log(uesrouteData,11)
const fold = ref(false) //用于控制菜单折叠
const changeIcon = () =>{
  fold.value = !fold.value;
}

//是否全屏
const fullScreen = () => {
  let full = document.fullscreenElement;
  if (!full) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen()
  }
}

</script>
<style lang="less" scoped>
.header {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #002140;
  padding: 0;
  align-items: center;

  .tabbar_left {
    display: flex;


  }

  .el-breadcrumb__inner {
    color: #fff !important;
  }
}
</style>